<template>
  <section v-loading="loading">
    <div class="manage-user-content">
      <div class="user-head">
        <el-form inline>
          <el-form-item>
            <el-select
              v-model="searchForm.srch_type"
              clearable
              placeholder="查询项目"
            >
              <el-option label="昵称" value="昵称" />
              <el-option label="电话号码" value="电话号码" />
              <el-option label="姓名" value="姓名" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.keyword"
              placeholder="关键字"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.start_time"
              type="datetime"
              placeholder="注册开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-date-picker
              style="width: 100%"
              v-model="searchForm.end_time"
              type="datetime"
              placeholder="注册结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.agent_type"
              clearable
              placeholder="分销用户查询项目"
            >
              <el-option label="昵称" value="昵称" />
              <el-option label="手机号" value="手机号" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              style="width: 100%"
              placeholder="选择客户"
              v-model="searchForm.customer_id"
              filterable
              clearable
            >
              <el-option
                v-for="ele in options"
                :key="ele.id"
                :label="ele.name"
                :value="ele.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              style="width: 100%"
              v-model="searchForm.agent_key"
              placeholder="分销用户查询关键字"
            />
          </el-form-item>

          <el-form-item>
            <div style="white-space: nowrap">
              <el-button type="primary" @click="searchFun">查询</el-button>
              <el-button @click="resetFun">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="coupon-table">
        <el-table
          border
          stripe
          :data="tableData"
          :height="store.tableHeight - 50"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="ID" width="55" prop="id" align="center" />
          <el-table-column label="用户信息" width="300">
            <template #default="{ row }">
              <div class="manage-info">
                <el-image
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row.headimg)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row.headimg)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <!-- <label>用户昵称：</label> -->
                    <span>{{ row.nickname }} </span>
                    <span
                      style="color: red; font-size: 12px; margin-left: 10px"
                    >
                      ({{ row.vip_name }})
                    </span>
                  </div>
                  <div>
                    <span>{{ row.realname }} </span>
                  </div>
                  <div>
                    <span>{{ row.phone }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所在地区" width="260">
            <template #default="{ row }">
              <div>
                <span>
                  {{ row.region_province }}
                  {{ row.region_city }}
                  {{ row.region_area }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收货信息" width="260">
            <template #default="{ row }">
              <div>
                <div>
                  <span>{{ row.addr?.phone }} </span>
                </div>
                <div>
                  <span>
                    {{ row.addr?.province }}
                    {{ row.addr?.city }}
                    {{ row.addr?.area }}
                    {{ row.addr?.street }}
                    {{ row.addr?.address }}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="order_amount_total"
            label="累计交易金额(元)"
            width="200"
          />
          <el-table-column prop="integral" label="积分" width="200">
            <template #default="{ row }">
              <div>累计积分:{{ row.integral_total }}</div>
              <div>已用积分:{{ row.integral_used }}</div>
              <div>剩余积分:{{ row.integral_total - row.integral_used }}</div>
            </template>
          </el-table-column>
          <el-table-column label="推荐用户" width="300">
            <template #default="{ row }">
              <div class="manage-info" v-if="row.agent">
                <el-image
                  v-if="row.agent?.headimg"
                  :preview-teleported="true"
                  style="width: 50px; min-width: 50px; height: 50px"
                  :src="imgSrc(row?.agent?.headimg)"
                  :zoom-rate="1.2"
                  :preview-src-list="[imgSrc(row?.agent?.headimg)]"
                  :initial-index="4"
                  fit="cover"
                  class="img-box"
                />
                <div class="right">
                  <div>
                    <span>{{ row?.agent?.nickname }} </span>
                  </div>
                  <div v-if="row?.agent?.id">
                    <span> ID: {{ row?.agent?.id }} </span>
                  </div>
                  <div>
                    <span>{{ row?.agent?.phone }} </span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="是否分销员" width="300">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                active-text="是"
                :active-value="1"
                inactive-text="否"
                :inactive-value="0"
                inline-prompt
                @change="statusNewFun(row)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="payment_status" label="返利统计" width="200">
            <template #default="{ row }">
              <div>累计返利：{{ row.rebate_total }}</div>
              <div>已提现：{{ row.rebate_used }}</div>
              <div>待提现：{{ row.rebate_lock }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="seller" label="销售"> </el-table-column>
          <el-table-column prop="created_at" label="注册时间" width="170">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="90">
            <template #default="{ row }">
              <el-switch
                v-model="row.status"
                active-text="启用"
                :active-value="1"
                inactive-text="冻结"
                :inactive-value="0"
                inline-prompt
                @change="statusFun(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="140"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="bindOpen(row)">
                绑定客户
              </el-button>
              <el-button type="danger" link @click="delFun(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-div">
          <div></div>
          <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[20, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div></div>
        </div>
      </div>
    </div>
  </section>
  <bindPage ref="bindPageRef" :options="options" @refreshList="refreshList" />
</template>
<script setup>
import {
  listApi,
  bindApi,
  delApi,
  customerOptionsApi,
  stateApi,
} from "@/plugins/api/shopping/user";
import { useCounterStore } from "@/stores/counter.js";
import bindPage from "./components/DialogBind.vue";
const store = useCounterStore();
let searchForm = ref({});

//
let tableData = ref([]);
let selectData = ref([]);
let loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val) => {
  pageSize.value = val;
  selectData.value = [];
  getData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectData.value = [];
  getData();
};

function searchFun() {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function resetFun() {
  currentPage.value = 1;
  searchForm.value = {};
  tableData.value = [];
  selectData.value = [];
  getData();
}
function refreshList() {
  getData();
}
function getData() {
  loading.value = true;
  let obj = Object.assign(
    {
      page: currentPage.value,
      pageSize: pageSize.value,
    },
    searchForm.value
  );

  listApi(obj)
    .then((data) => {
      tableData.value = data.list.map((item) => {
        return item;
      });
      total.value = data.page.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function handleSelectionChange(val) {
  selectData.value = val;
}
function delAllFun() {
  ElMessageBox.confirm("确认批量删除选中的数据，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let arr = selectData.value.map((ele) => {
        return ele.id;
      });
      delApi({
        id: arr.join(","),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        selectData.value = [];
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function tabChange(name) {
  currentPage.value = 1;
  selectData.value = [];
  tableData.value = [];
  getData();
}
function imgSrc(path) {
  return import.meta.env.VITE_APP_BASE_API + path;
}
// 详情
let bindPageRef = ref(null);
function bindOpen(row) {
  bindPageRef.value.initFun(row);
}
// 冻结--解冻
function statusFun(row) {
  bindApi({
    status: row.status,
    id: row.id,
  }).then(() => {
    ElMessage({
      type: "success",
      message: "修改成功！",
    });
    getData();
  });
}
// 设置用户为分销用户
function statusNewFun(row) {
  stateApi({
    status: row.status,
    id: row.id,
  }).then(() => {
    ElMessage({
      type: "success",
      message: "修改成功！",
    });
    getData();
  });
}
// 发货
let sendPageRef = ref(null);
function sendOrder(row) {
  ElMessageBox.confirm("确认冻结，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id.toString(),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "冻结成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
function delFun(row) {
  ElMessageBox.confirm("确认删除，是否继续?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delApi({
        id: row.id.toString(),
      }).then(() => {
        ElMessage({
          type: "success",
          message: "删除成功！",
        });
        getData();
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消。",
      });
    });
}
// 获取用户数据
let options = ref([]);
function getCustem() {
  customerOptionsApi().then((data) => {
    options.value = data;
  });
}
//
onMounted(() => {
  getData();
  getCustem();
});
</script>

<style lang="scss" scoped>
.manage-user-content {
  width: 100%;
  padding: 10px;
  height: calc(100% - 40px);
  overflow: hidden;
  box-sizing: border-box;

  .user-head {
    :deep(.el-form-item) {
      margin-right: 10px;
      width: calc(100% / 9);
    }
  }

  .pagination-div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .manage-info {
    display: flex;

    .img-box {
      align-self: center;
    }

    .right {
      margin-left: 10px;
      align-self: center;

      span {
        color: #409eff;
      }
    }
  }
}
</style>
